<template>
   <div class="style-chart"
   style="padding-bottom:10px"
   :id="id">
   </div>       
</template>
<script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/line')
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/legend')
    export default {
      name: 'barPercent',
      props: {
        echartInfor: {
          type: Object,
          default: function () { return { data: [] } }
        },
        className: {
          type: String,
          default: 'chart'
        },
        id: {
          type: String,
          default: 'chart'
        }
      },
      data () {
        return {
          loading: false,
          chart:null
        }
      },
      watch: {
            'echartInfor':function(val){
              if(val.legend&&val.xAxis){
                 this.dataShow()
                 this.$nextTick(()=>{
                   this.initChart()
                 })
              }
                
            }
        },
      methods: {
        dataShow () {
          let _this = this
          let series = []
          if(this.echartInfor.dataShowList){
              this.echartInfor.dataShowList.forEach((val, index) => {
              series.push(// 设置每个柱子
                {
                  name: val.name,
                  type: 'line',
                  stack: '总量',
                  areaStyle: {normal: {
                     color: _this.echartInfor.colorList[index]
                  }}, // 是否有堆叠区域图
                  itemStyle: {
                    normal: {
                      color () { // 圈圈的颜色
                        return _this.echartInfor.colorList[index]
                      },
                      lineStyle: {// 线的颜色
                        color: _this.echartInfor.colorList[index]
                      }
                    }
                  },
                  data: val.data// 数据
                }
               )
            })
          }
          return series
        },
        initChart () {
          if(this.chart){
              this.chart.dispose();
          }
          this.chart = echarts.init(document.getElementById(this.id))
          let option = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: this.echartInfor.legend,
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: this.echartInfor.xAxis,
            yAxis: {
              type: 'value'
            },
            backgroundColor: '#fff', // Echart的背景色
            series: this.dataShow()// 数据展示
          }
          this.chart.setOption(option)
        }
      }
    }
</script>
<style lang="scss" scoped>
.style-chart{
  width: 100%;
  height: 400px;
}
</style>
